import { Button, Drawer } from "antd"
import lessModule from "./index.module.less"
import HomePage_ModalComponent_HeaderNormalComponent from "../../../../../../component/modal/component/headerNormal"
import HomePage_CardTitleComponent from "../../../../../../component/cardtitle"
import { $constantList } from "../../../../../../../../common/utils"
import { ReactComponent as FiveOneOnOneSvg } from '../../../../../../../../assets/svg/500OneOnOne.svg'
import { ReactComponent as TwoOneOnOneSvg } from '../../../../../../../../assets/svg/220OneOnOne.svg'
import { ReactComponent as TwoOneToMany } from '../../../../../../../../assets/svg/220OneToMany.svg'
import { useState } from "react"
import { number } from "echarts"
import HomePage_PanoramicMonitoringPage_LayerComponent_StationModalComponent_StraightCardComponent from "../straightCard"

// 主页-全景监控页面-浮层组件-站点弹窗组件
interface componentInterface {
    name: string
    sourceData: object
    change_cancel: Function
}
const HomePage_PanoramicMonitoringPage_LayerComponent_StationModalComponent: React.FC<componentInterface> = (props) => {
    const columnList = [
        {
            label: "中性点直流",
            key: "DC",
            statusKey: "dcStatus",
            unit: "A"
        },
        {
            label: "中性点交流",
            key: "AC",
            statusKey: "acStatus",
            unit: "A"
        },
        {
            label: "变压器噪声",
            key: "NI",
            statusKey: "niStatus",
            unit: "dB"
        },
        {
            label: "变压器振动",
            key: "VA",
            statusKey: "vaStatus",
            unit: "mm/s"
        },
        {
            label: "地网对地电位",
            key: "EP",
            statusKey: "epStatus",
            unit: "V"
        },
    ]
    const cardRowList = [
        [
            {
                label: "巡维中心",
                key: "maintainCentre",
            },
            {
                label: "安装站点",
                key: "stationName",
            },
            {
                label: "安装主变",
                key: "monitorMain",
            },
            {
                label: "调度编号",
                key: "dispatchNumber",
            },
            {
                label: "装置厂家",
                key: "deviceFac",
            },
        ],
        [
            {
                label: "装置型号",
                key: "deviceModel",
            },
            {
                label: "出厂编号",
                key: "facNumber",
            },
            {
                label: "投用日期",
                key: "opeDate",
            },
            {
                label: "IP地址",
                key: "ipAddress",
            },
        ]
    ]
    const [tabIdx, setTabIdx] = useState<number>(0)
    const click_tab = (idx: number) => {
        tabIdx !== idx && setTabIdx(idx)
    }
    return (
        <div className={lessModule["homePagePanoramicMonitoringPageLayerComponentStationModalComponent"]}>
            <HomePage_ModalComponent_HeaderNormalComponent name={props.name} fontSize={20} padding="14px 24px" change_cancel={props.change_cancel} />
            <main className={lessModule["homePagePanoramicMonitoringPageLayerComponentStationModalComponent-main"]}>
                <HomePage_CardTitleComponent title="监测主变" bgColor="#FFFFFF" border="1px solid rgba(0, 0, 0, 0.15)" margin="13px 0" />
                {
                    props.sourceData["monitorMain"]?.map((item: object, idx: number) => (
                        <div key={`main${idx}`} className={lessModule["homePagePanoramicMonitoringPageLayerComponentStationModalComponent-main__card"]} style={{ marginTop: idx ? 2 : 0 }}>
                            <div className={lessModule["main-card__left"]}>{item["monitorMain"]}</div>
                            <div className={lessModule["main-card__right"]}>
                                {
                                    columnList.map((columnItem, columnIdx) => (
                                        <div key={`${idx}column${columnIdx}`} className={lessModule["card-right__column"]}>
                                            <div>{columnItem["label"]}</div>
                                            <div className={lessModule["right-column__value"]} style={{ color: $constantList["stationStatusColor"][item["realData"][`${columnItem["statusKey"]}`]] }}>
                                                <span> {item["realData"][columnItem["key"]] ?? "-"}</span>
                                                <span className={lessModule["column-value__unit"]}> {item["realData"][columnItem["key"]] ? columnItem["unit"] : ""}</span>
                                            </div>
                                        </div>
                                    ))
                                }
                            </div>
                        </div>
                    ))
                }
                <div className={lessModule["homePagePanoramicMonitoringPageLayerComponentStationModalComponent-main__tab"]} >
                    {
                        props.sourceData["straight"]?.map((item: object, idx: number) => (
                            <div key={`straight${idx}`} onClick={() => click_tab(idx)}>
                                <HomePage_CardTitleComponent title={`隔直装置${props.sourceData["straight"]?.length > 1 ? idx + 1 : ""}`} bgColor={tabIdx === idx ? "#E6F7FF" : "#FFFFFF"} border="1px solid rgba(0, 0, 0, 0.15)" margin="13px 0" />
                            </div>
                        ))
                    }
                </div>
                {
                    props.sourceData["straight"]?.length > 0 && <div className={lessModule["homePagePanoramicMonitoringPageLayerComponentStationModalComponent-main__device"]}>
                        {
                            props.sourceData["volLevel"] === "220kV" ? props.sourceData["straight"][tabIdx]["connectMethod"] === "一对一" ? <TwoOneOnOneSvg />

                                : props.sourceData["straight"][tabIdx]["connectMethod"] === "一对多" && <TwoOneToMany />

                                : props.sourceData["volLevel"] === "500kV" && props.sourceData["straight"][tabIdx]["connectMethod"] === "一对一" && <FiveOneOnOneSvg />
                        }
                        <HomePage_PanoramicMonitoringPage_LayerComponent_StationModalComponent_StraightCardComponent cardRowList={cardRowList} sourceData={props.sourceData["straight"][tabIdx]} />
                    </div>
                }
            </main>
            {/* <footer className={lessModule["homePagePanoramicMonitoringPageLayerComponentStationModalComponent-footer"]}>
                <Button className={lessModule["homePagePanoramicMonitoringPageLayerComponentStationModalComponent-footer__btn"]} type="primary">控制远动开关</Button>
            </footer> */}
        </div>
    )
}



export default HomePage_PanoramicMonitoringPage_LayerComponent_StationModalComponent